<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 
<%
	String path = request.getScheme() + "://" + request.getServerName()
			+ ":" + request.getServerPort() + request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>${farm.farmInfoName }【农场主页】</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="apple-mobile-web-app-title" content="">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="<%=path%>/resources/images/log.png" />
    <link rel="stylesheet" href="<%=path%>/resources/css/base.css">
    <link rel="stylesheet" href="<%=path%>/resources/css/fhp.css">
    <link rel="stylesheet" href="<%=path%>/resources/css/style.css">
    <link rel="stylesheet" href="<%=path%>/resources/js/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="<%=path%>/resources/js/bootstrap/css/bootstrap.min.css">
    <script src="<%=path%>/resources/js/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="<%=path%>/resources/js/layer/layer.js" type="text/javascript"></script>
    <script src="<%=path%>/resources/js/iscroll/iscroll.js" type="text/javascript"></script>
    <script src="<%=path%>/resources/js/bootstrap/bootstrap.min.js" type="text/javascript"></script>
    <!--<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
    <style>
        .proname h2 {
            font-size: 14px;
            color: #27ae61;
            margin-top: 1px;
        }
        .col-xs-3 {
            width: 40%;
        }
        .lis {
            display: none;
        }
        #wrapper {
            position: absolute;
            z-index: 1;
            top: 0px;
            bottom: 0px;
            left: -9999px;
            width: 100%;
            max-width: 400px;
            overflow: auto;
        }

        #pullUp {
            background: #fff;
            height: 40px;
            line-height: 40px;
            padding: 0px 40px;
            border-bottom: 1px solid #ccc;
            font-weight: bold;
            font-size: 1.6rem;
            color: #888;
            text-align: center;
            width: 110%;
            margin-left: -13px;
        }

        #pullUp .pullUpIcon {
            display: block;
            float: left;
            width: 40px;
            height: 40px;
            background: url(<%=path%>/resources/images/pull-icon@2x.png) 0 0 no-repeat;
            -webkit-background-size: 40px 80px;
            background-size: 40px 80px;
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 250ms;
        }
        #pullUp .pullUpIcon {
            -webkit-transform: rotate(-180deg) translateZ(0);
        }
        #pullUp.flip .pullUpIcon {
            -webkit-transform: rotate(0deg) translateZ(0);
        }
        #pullUp.loading .pullUpIcon {
            background-position: 0 100%;
            -webkit-transform: rotate(0deg) translateZ(0);
            -webkit-transition-duration: 0ms;
            -webkit-animation-name: loading;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }
        @-webkit-keyframes loading {
            from {
                -webkit-transform:rotate(0deg)translateZ(0);
            }

            to {
                -webkit-transform: rotate(360deg) translateZ(0);
            }
        }
        h5{
            font-size:1.8rem;
        }
        .js ,.ncdz, .ncdh,.label2 span{
            font-size:1.4rem;
        }
        .min a h5{
            font-size:1.5rem;
        }
        .san {
            margin-top: 7px;
        }
        .label1 span{
            font-size: 1.6rem;
        }
        a:active{color:#fff}
    </style>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?341e0c5da538f3ffadaecd9772daf01b";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
        $(function() {
            var z = $(".js").text();
            if (z.length > 20) {
                $(".js").text(z.substring(0, 20) + '...');

            }
            ;
        });
    </script>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?341e0c5da538f3ffadaecd9772daf01b";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body style="background-color: #eee;">
    <div  id='wx_pic' style='margin: 0 auto; display: none;'>
        <img id="d" src="">
    </div>
    <div style="width: 100%; max-width: 400px; height: auto; margin: 0 auto;">
        <div id="wrapper">
            <div class="container-fluid" id="scroller">
                <div class="row r1 head">
                    <div class="col-xs-2 c1">
                        <img class="img-circle avatar " src="http://ll.sharestar.cn/image/${farmer.farmerImage}">
                    </div>
                    <input type="hidden" value="${farm.farmInfoIntro}" id="yyy" />
                    <div class="col-xs-8 min col-xs-offset-1 ">
                        <h5>${farm.farmInfoName }</h5>
                        <span style="color: #000">农场介绍：</span>
                        
                        
                        <c:choose>
                        	<c:when test="${farm.farmInfoIntro.length()>=8}">
                        		<span class="js" onclick="xx(this)">${farm.farmInfoIntro.substring(0,8)}...</span>
                        	</c:when>
                        	<c:otherwise>
                        		<span class="js" onclick="xx(this)">${farm.farmInfoIntro}</span>
                        	</c:otherwise>
                        </c:choose>
                        
                        <p>
                            <span>农场地址：</span>
                            <span class="ncdz">${farm.farmInfoAddress }</span>
                        </p>
                        <p>
                            <span><img class="ncdhtb" src="<%=path%>/resources/images/ncdhtb.png" alt="" /></span>
                            <span class="ncdh"><a href="tel:${farmer.farmerPhone }">${farmer.farmerPhone }</a></span>
                        </p>
                    </div>
                </div>
                <div class="row r2">
                    <div class="col-xs-3 min  hj  san">
                        <a  href="<%=path%>/pc/record/farmEnvironment?farmId=${farm.farmInfoId}">
                            <img class="img-circle col2"
                             src="<%=path%>/resources/images/nongchanghuanjing.png">
                            <h5 style="margin-top: 2px;">农场环境</h5>
                        </a>
                    </div>
                    <div class="col-xs-3 min dl san">
                        <a href="<%=path%>/pc/record/toLocation?farmerId=${farmer.farmerId}">
                            <img class="img-circle col2" src="<%=path%>/resources/images/dilifengmao.png">
                            <h5 style="margin-top: 2px;">地理风貌</h5>
                        </a>
                    </div>
                </div>
                <ul>
                    <li class='lis'>
	                    <c:forEach var="fur" items="${productList }" varStatus="index"> 
	                        <div class="row min picture">
	                            <div class="col-xs-12 xh" style="width: 96%;margin-left: 2%;background-image:url('http://ll.sharestar.cn/image/${fur.furImage.substring(0,19)}_raw.jpg')">
	                                <a class="furimg" href="<%=path%>/pc/record/toLook?furId=${fur.id}" style="cursor: pointer;">
	                                    <img class="szgc" src="<%=path%>/resources/images/shengzhangguocheng.png" alt="">
	                                    <img class="zsjqh" src="<%=path%>/resources/images/zsjxh.png" alt="">
	                                    <img class="zsjqh" src="<%=path%>/resources/images/zsjqh.png" alt="">
	                                </a>
	                            </div>
	                            <div class="label1">
	                                <span class="name">${fur.furName }</span>
	                            </div>
	                            <div class="label2">
	                                <span class="ncm">${farm.farmInfoName }</span>
	                                <span class="dates">
	                                	<fmt:formatDate value="${fur.furStartDate }"  pattern="yyyy年MM月dd日 "/>
	                                	开始采摘
	                                </span>
	                            </div>
	                        </div>
	                  	</c:forEach>
					 </li>
                </ul>
                <div id="pullUp">
                    <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
                </div>
            </div>
        </div>
    </div>
    <!--<script type="text/javascript">-->
        <!--var i = "${i}";-->
        <!--for (var j = 1; j <= i; j++) {-->

            <!--var dd = $('#' + j + 'c').attr('src');-->
            <!--var ss = dd.split('/');-->
            <!--var ff = "http://ll.sharestar.cn/image/" + ss[4].split('.')[0]-->
                <!--+ "_raw.jpg";-->
            <!--$('#' + j + 'c').attr('src', ff);-->

        <!--}-->
    <!--</script>-->

    <!--<script type="text/javascript">-->
        <!--var s = "${s}";-->
        <!--for (var j = 1; j <= s; j++) {-->

            <!--var dd = $('#' + j + 'f').attr('src');-->
            <!--var ss = dd.split('/');-->
            <!--var ff = "http://ll.sharestar.cn/image/" + ss[4].split('.')[0]-->
                <!--+ "_raw.jpg";-->
            <!--$('#' + j + 'f').attr('src', ff);-->

        <!--}-->
    <!--</script>-->
    <script type="text/javascript">
    	 $(".xh").click(
                function() {
                	window.location=$(this).children("a.furimg").attr('href');
                });
               /*      var ddd = $(this).find("img.zsjqh").attr("id");
                    var id = $(this).attr("id");
                    var url;
                    if (ddd == 1) {
                        url = "http://ll.sharestar.cn/product/product_cashSelectphone.html?cashSaleId="
                            + id;
                    } else if (ddd == 0) {
                        url = "http://ll.sharestar.cn/product/futureProduct_futureSelectdMobiletow.html?furSaleId="
                            + id;
                    } else {
                        alert("页面加载超时，请刷新后再试！");
                    }
                    window.open(url);
                }); */
            function xx(a) {
                alert($("#yyy").val());
            }; 
    </script>
    <script type="text/javascript">
        var lis, myScroll, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 15;
        function pullUpAction() {
            setTimeout(function() { // 模拟网络拥堵，从生产中删除的setTimeout！
                generatedCount = generatedCount + 15;
                for (var i = 0; i < generatedCount; i++) {
                    $('#' + i).css('display', 'inline');
                }
                myScroll.refresh(); // 请记住，当刷新内容被加载（即：对AJAX完成）
            }, 1000); // 模拟网络拥堵，从生产中删除的setTimeout！
        }

        function loaded() {
            lis = $(".lis");
            if (lis.length < 16) {
                $(".lis").css('display', 'inline');
            }
            for (var i = 0; i < generatedCount; i++) {
                $('#' + i).css('display', 'inline');
            }
            pullUpEl = document.getElementById('pullUp');
            pullUpOffset = pullUpEl.offsetHeight;

            myScroll = new iScroll(
                'wrapper',
                {
                    useTransition : true,
                    topOffset : pullDownOffset,
                    onRefresh : function() {
                        lis = $(".lis");
                        if (pullUpEl.className.match('loading')) {
                            if (generatedCount < lis.length) {
                                pullUpEl.className = '';
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                            } else {
                                pullUpEl.className = '';
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = '没有更多信息了！';
                                $(".pullUpIcon").css("display", "none");
                            }
                        }
                    },
                    onScrollMove : function() {
                        if (this.y < (this.maxScrollY - 5)
                            && !pullUpEl.className.match('flip')) {
                            pullUpEl.className = 'flip';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '松开刷新...';
                            this.maxScrollY = this.maxScrollY;
                        } else if (this.y > (this.maxScrollY + 5)
                            && pullUpEl.className.match('flip')) {
                            pullUpEl.className = '';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '没有更多信息了...';
                            this.maxScrollY = pullUpOffset;
                        }
                    },
                    onScrollEnd : function() {
                        if (pullUpEl.className.match('flip')) {
                            pullUpEl.className = 'loading';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
                            pullUpAction(); // 执行自定义函数（AJAX调用？）
                        }
                    }
                });

            setTimeout(function() {
                var left = ($(window).width() - 400) / 2;
                /* document.getElementById('wrapper').style.left = left; */
                if ($(window).width() < 400) {
                    $("#wrapper").css("left", 0);
                } else {
                    $("#wrapper").css("left", left);
                }
            }, 800);
        }

        document.addEventListener('touchmove', function(e) {
            e.preventDefault();
        }, false);

        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(loaded, 200);
        }, false);
    </script>

</body>
</html>